<template>
  <div class="product-sku">
    <div v-if="loadError" class="error-message">
      商品加载失败：{{ loadError.message }}
    </div>
    <SkusPanel :product="product" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as Api from "@/api/index";
import type { ProductInfo } from "@/api/types/product";
import SkusPanel from "@/components/ui/product/SkusPanel.vue";

const product = ref<ProductInfo | null>(null);
const loadError = ref<Error | null>(null);

const fetchProductInfo = async () => {
  const id = "e3925022-4506-47d9-a277-5690b631a6e8";
  try {
    const res = await Api.getProductDetail(id, { isAdmin: 0 });

    console.log("商品详情：", res);
    let originalData = res.data;
    console.log("商品详情：",originalData);
    product.value = originalData;
  } catch (error) {
    loadError.value = error as Error;
  }
};

onMounted(() => {
  fetchProductInfo();
  try {
    // product.value = [] as ProductInfo;
  } catch (err) {
    loadError.value = err as Error;
    console.error("商品数据加载失败:", err);
  }
});
</script>

<style scoped>
.product-sku {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.error-message {
  color: #f56c6c;
  padding: 20px;
  text-align: center;
  border: 1px solid #f56c6c;
  border-radius: 4px;
  background-color: #fef0f0;
}
</style>
